import React, { Component } from 'react'
import { caipinUrl, dingdanUrl } from '../util/constHelper.js'
import axios from 'axios'
import Table from '../util/Table.jsx'
import ajax from '../util/ajax.js'
import Model from '../util/Model.order.jsx'
import ModelShow from '../util/ModelShow.jsx'
import Calendar from 'react-input-calendar'
import '../../node_modules/_react-input-calendar@0.5.2@react-input-calendar/style/index.css'


const columns = [
	{
		title: '桌号',
		dataIndex: 'desk_num',
		key: 'desk_num',
		width: '50px'
	},
	{
		title: '订单号',
		dataIndex: 'dingdan_num',
		key: 'dingdan_num',
		width: '150px'
	},
	{
		title: '总金额',
		dataIndex: 'total_price',
		key: 'total_price',
		width: '100px'
	},
	{
		title: '下单时间',
		dataIndex: 'create_time',
		key: 'create_time',
		width: '150px'
	},
	{
		title: '菜单',
		dataIndex: 'caipin_ids',
		key: 'caipin_ids',
		width: '150px'
	},
	{
		title: '状态',
		dataIndex: 'status',
		key: 'status',
		width: '150px'
	},
	{
		title: '结账时间',
		dataIndex: 'pay_time',
		key: 'pay_time',
		width: '150px'
	}


]

export default class Orders extends Component {
	state = {
		orderList: [],
		current: 1,
		pageSize: 10,
		total: 0,
		isShow: false,
		changeObj: {},
		dingdanObj: {},
		caipinsArr: [],
		seeShow: false,
		caiObj: {},
		dateHide:true,
		data: "9-1-2018"
	}

	componentDidMount() {
		this.getData()
	}

	getData = () => {
		const getCaipinData = () => {
			return axios({
				url: caipinUrl,
				method: "get",
				params: {
					transform: 1,
					order: 'id,desc'
				}
			}).then(res => {
				return res.data.dc_caipin
			}).then().catch({})
		}
		const getDingdanData = () => {
			return axios({
				url: dingdanUrl,
				method: "get",
				params: {
					transform: 1,
					order: 'id,desc',
					page: `${this.state.current},${this.state.pageSize}`
				}
			}).then(res => {
				return res.data
			}).then().catch({})
		}

		axios.all([getCaipinData(), getDingdanData()])
			.then(
			axios.spread((caipin, dingdan) => {
				// console.log(caipin)
				// console.log(dingdan)

				this.setState({
					orderList: dingdan.dc_dingdan,
					dingdanObj: dingdan.dc_dingdan[0] || {},
					caipinsArr: caipin,
					total: dingdan._results

				})
			})
			)

	}

	seatchData = (text) => {

		let params = {
			transform: 1,
			order: 'id,desc',
			page: `${this.state.current},${this.state.pageSize}`,
			filter: ''
		}
		if (text === 1 || text === 0){
			params.filter = `status,cs,${text}`
		} else {
			params.filter = `create_time,cs,${text}`
		}
		axios({
			url: dingdanUrl,
			method: "get",
			params: params
		}).then(res => {
			this.setState({
				orderList: res.data.dc_dingdan,
				dingdanObj: res.data.dc_dingdan[0] || {},
				total: res.data._results
			})
		}).then().catch({})

	}

	saveData = (data) => {
		let method = 'post',
			url = dingdanUrl
		if (data.id) {
			method = 'put'
			url = dingdanUrl + '/' + data.id
		}
		!data.id && (data.caipin_ids = data.caipin_ids.join(','))
		// console.log(data)
		ajax({
			url,
			method,
			data,
			success: res => {
				console.log('添加||修改成功')
				this.getData()
				this.hideForm()
			}
		})
	}

	hideForm = () => {
		this.setState({ isShow: false })
	}
	showForm = () => {
		this.setState({ isShow: true })
	}

	handleCheckbox = () => {

	}

	payIt = (status) => {
		console.log(status)  //发送结单状态
		status.pay_time = new Date().toLocaleDateString() + '/' + new Date().getHours() + '/' + new Date().getMinutes() + '/' + new Date().getSeconds()
		status.status = 1
		this.saveData(status)
	}

	seeCaidan = (a) => {
		this.setState({
			seeShow: true,
			caiObj: a
		})
	}
	hideCaidan = () => {
		this.setState({ seeShow: false })
	}

	getDateChange = (a) => {
		let asa
		let times = a.split('-')
		a = times[2] + '-' + times[0] + '-' + times[1]
		this.seatchData(a)
		
		asa = times[1] * 1 + '-' + times[0] * 1 + '-' + times[2]

		this.setState({
			dateHide:false,
			data: asa
		})
	}

	render() {

		const columns = [
			{
				title: '桌号',
				dataIndex: 'desk_num',
				key: 'desk_num',
				width: '80px'
			},
			{
				title: '订单号',
				dataIndex: 'dingdan_num',
				key: 'dingdan_num',
				width: '150px'
			},
			{
				title: '总金额',
				dataIndex: 'total_price',
				key: 'total_price',
				width: '100px'
			},
			{
				title: '下单时间',
				dataIndex: 'create_time',
				key: 'create_time',
				width: '150px'
			},
			{
				title: '菜单',
				dataIndex: 'caipin_ids',
				key: 'caipin_ids',
				width: '80px',
				render: record => {
					return <button onClick={this.seeCaidan.bind(null, record)} className="btn btn-sm btn-info">查看</button>
				}
			},
			{
				title: '状态',
				dataIndex: 'status',
				key: 'status',
				width: '150px',
				render: record => {
					if (!record.status) {
						return <span>待付款</span>
					} else {
						return <span>已结单</span>
					}
				}
			},
			{
				title: '结账时间',
				dataIndex: 'pay_time',
				key: 'pay_time',
				width: '150px',
				render: record => {
					if (!record.status) {
						return <span>未付款</span>
					} else {
						return <span>{record.pay_time}</span>
					}
				}
			},
			{
				title: '结单',
				dataIndex: 'pay_time',
				key: 'pay_time',
				render: record => {
					if (!record.status) {
						return <button onClick={this.seeCaidan.bind(null, record)} className="btn btn-sm btn-warning">结单</button>
					} else {
						return <button onClick={this.seeCaidan.bind(null, record)} className="btn btn-sm btn-info">查看</button>
					}
				}
			}


		]

		const pagination = {
			handlePageChange: (page) => {
				this.setState({
					current: page
				}, () => {
					this.getData()
				})
			},
			current: this.state.current,
			pageSize: this.state.pageSize,
			total: this.state.total
		}

		return (
			<section className="content container-fluid">
				<section className="content-header no-padding">
					<h1>
						订单管理
            	<small>ED订餐管理系统</small>
					</h1>
					<ol className="breadcrumb no-padding">
						<li><a href=""><i className="fa fa-dashboard"></i> 首页</a></li>
						<li className="active">订单管理</li>
					</ol>
				</section>
				<div className="row " style={{ margin: "10px 0" }}>
					<div className="col-xs-4 no-padding">
						<div className="btn-group">
							<button onClick={this.seatchData.bind(null, 1)} type="button" className="btn btn-info">已结账</button>
							<button onClick={this.seatchData.bind(null, 0)} type="button" className="btn btn-warning">未结账</button>
							<button onClick={this.getData} type="button" className="btn btn-danger">全部</button>
						</div>
					</div>

					<div className="col-xs-4 no-padding">
						<div>
							<Calendar
								hideOnBlur={this.state.dateHide}
								onChange={this.getDateChange}
								format='DD/MM/YYYY'
								date={this.state.data}
							/>
						</div>
					</div>

				</div>
				<Table
					dataSource={this.state.orderList}
					columns={columns}
					fixedHeader={true}
					handleCheckbox={this.handleCheckbox}
					pagination={pagination}
				/>

				<div>
					{this.state.isShow &&
						<Model
							saveData={this.saveData}
							hideForm={this.hideForm}
							changeObj={this.state.changeObj}
							dingdanObj={this.state.dingdanObj}
							caipins={this.state.caipinsArr}
						/>}
				</div>
				{this.state.seeShow &&
					<ModelShow
						hideCaidan={this.hideCaidan}
						caipinData={this.state.caipinsArr}
						caiObj={this.state.caiObj}
						payIt={this.payIt}
					/>}

			</section>
		)
	}
}
